<script setup>
import { ref, computed } from 'vue'
import { Toast } from 'vant'
import { getCheckoutOrder, submitCheckoutOder } from '@/api/checkout'
import CouponItem from '@/components/CouponItem.vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

const order = ref({})
const personal = ref({})
const remark = ref('')
const isUseCoupon = ref(false)
const couponShow = ref(false)

const addressInfo = computed(() => {
  const region = order.value.address.region
  return (
    region.province + region.city + region.region + order.value.address.detail
  )
})

const couponNum = computed(() => {
  return order.value.couponList.length
})

const getCheckout = async () => {
  if (route.query.mode === 'cart') {
    const { data } = await getCheckoutOrder({
      mode: 'cart',
      delivery: order.value.delivery,
      couponId: order.value.couponId,
      isUsePoints: order.value.isUsePoints,
      cartIds: route.query.cartIds
    })
    order.value = data.order
    personal.value = data.personal
  }

  if (route.query.mode === 'buyNow') {
    const { data } = await getCheckoutOrder({
      mode: 'buyNow',
      delivery: order.value.delivery,
      couponId: order.value.couponId,
      isUsePoints: order.value.isUsePoints,
      goodsId: route.query.goodsId,
      goodsNum: route.query.goodsNum,
      goodsSkuId: route.query.goodsSkuId
    })
    order.value = data.order
    personal.value = data.personal
  }
}

const submit = async () => {
  if (route.query.mode === 'cart') {
    await submitCheckoutOder({
      mode: 'cart',
      delivery: order.value.delivery,
      payType: order.value.payType,
      couponId: order.value.couponId,
      isUsePoints: order.value.isUsePoints,
      remark: remark.value,
      cartIds: route.query.cartIds
    })
  }

  if (route.query.mode === 'buyNow') {
    await submitCheckoutOder({
      mode: 'buyNow',
      delivery: order.value.delivery,
      payType: order.value.payType,
      couponId: order.value.couponId,
      isUsePoints: order.value.isUsePoints,
      remark: remark.value,
      goodsId: route.query.goodsId,
      goodsNum: route.query.goodsNum,
      goodsSkuId: route.query.goodsSkuId
    })
  }

  setTimeout(() => {
    Toast('支付成功')
  }, 200)
  router.push('/order')
}

const useCoupon = () => {
  couponShow.value = true
}

const noUseCoupon = () => {
  couponShow.value = false
  order.value.couponId = 0
  isUseCoupon.value = false
  getCheckout()
}

const choiceCoupon = (obj) => {
  couponShow.value = false
  order.value.couponId = obj.user_coupon_id
  isUseCoupon.value = true
  getCheckout()
}

const init = async () => {
  if (route.query.mode === 'cart') {
    const { data } = await getCheckoutOrder({
      mode: 'cart',
      delivery: 10,
      couponId: 0,
      isUsePoints: 0,
      cartIds: route.query.cartIds
    })
    order.value = data.order
    personal.value = data.personal
  }

  if (route.query.mode === 'buyNow') {
    const { data } = await getCheckoutOrder({
      mode: 'buyNow',
      delivery: 10,
      couponId: 0,
      isUsePoints: 0,
      goodsId: route.query.goodsId,
      goodsNum: route.query.goodsNum,
      goodsSkuId: route.query.goodsSkuId
    })
    order.value = data.order
    personal.value = data.personal
  }
}
init()
</script>
<template>
  <div class="checkout">
    <van-nav-bar
      title="订单结算台"
      left-arrow
      fixed
      @click-left="$router.back()"
    />

    <!-- 配送地址 -->
    <div
      class="address"
      @click="$router.push(`/address?from=checkout`)"
      v-if="order.existAddress"
    >
      <van-icon name="location-o" size="18px" />
      <div>
        <p>
          <span>{{ order.address.name }}</span>
          <span>{{ order.address.phone }}</span>
        </p>
        <p>{{ addressInfo }}</p>
      </div>
      <van-icon name="arrow" size="14px" />
    </div>

    <div class="address" @click="$router.push(`/address?from=checkout`)" v-else>
      <van-icon name="location-o" size="18px" />
      <p>请选择配送地址</p>
      <van-icon name="arrow" size="14px" />
    </div>

    <!-- 商品列表 -->
    <div class="goods">
      <div
        class="item"
        v-for="item in order.goodsList"
        :key="item.goods_id"
        @click="$router.push(`/detail?goodsId=${item.goods_id}`)"
      >
        <div>
          <img :src="item.goods_image" />
        </div>
        <div class="right">
          <p>{{ item.goods_name }}</p>
          <p>
            <span>x{{ item.total_num }}</span>
            <span>￥{{ item.goods_price_min }}</span>
          </p>
        </div>
      </div>
      <p class="total">
        共{{ order.orderTotalNum }}件商品，合计：<span style="color: red"
          >￥{{ order.orderTotalPrice }}</span
        >
      </p>
    </div>

    <!-- 费用 -->
    <div class="money">
      <p>
        <span>订单总金额：</span>
        <span style="color: red">￥{{ order.orderPrice }}</span>
      </p>
      <p>
        <span>优惠券：</span>
        <span v-if="order.couponList" class="red" @click="useCoupon">
          <span>{{
            isUseCoupon ? `-￥${order.couponMoney}` : `有${couponNum}张优惠券`
          }}</span>
          <van-icon name="arrow" />
        </span>
        <span v-else>无优惠券可用</span>
      </p>
      <p>
        <span>配送费用：</span>
        <span v-if="order.existAddress" class="red"
          >+￥{{ order.expressPrice }}</span
        >
        <span v-else>请先选择配送地址</span>
      </p>
    </div>

    <!-- 支付方式 -->
    <div class="pay">
      <p>
        <span>支付方式</span>
      </p>
      <p>
        <span>
          <van-icon name="balance-o" color="#ff9700" size="16px" />
          <span class="mode">余额支付</span>
          <span>(可用￥{{ personal.balance }}元)</span>
        </span>
        <van-icon name="success" color="red" size="16px" />
      </p>
    </div>

    <!-- 留言 -->
    <input
      class="note"
      placeholder="选填：买家留言（50字以内）"
      type="text"
      v-model="remark"
    />

    <!-- 提交按钮 -->
    <div class="footer">
      <p>
        <span>实付款：</span>
        <span style="color: red">￥{{ order.orderPayPrice }}</span>
      </p>
      <button @click="submit">提交订单</button>
    </div>

    <!-- 优惠券的弹层 -->
    <van-popup
      v-model:show="couponShow"
      position="bottom"
      :style="{ height: '60%' }"
    >
      <p class="title">选择优惠券</p>
      <div class="list">
        <CouponItem
          v-for="item in order.couponList"
          :key="item.coupon_id"
          :item="item"
          @click="choiceCoupon(item)"
        ></CouponItem>
      </div>
      <button class="button" @click="noUseCoupon">不使用优惠券</button>
    </van-popup>
  </div>
</template>

<style lang="less" scoped>
.checkout {
  padding-top: 46px;
  padding-bottom: 50px;
}

.van-nav-bar {
  ::v-deep .van-nav-bar__title {
    font-weight: bold;
  }

  ::v-deep .van-icon-arrow-left {
    color: black;
  }
}

.address {
  width: 345px;
  height: 19px;
  padding: 17px 15px;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  color: #666;
  font-size: 14px;
  background-color: white;
  margin-bottom: 2px;

  p {
    width: 293px;
  }

  span {
    padding-right: 5px;
  }
}

.goods {
  // min-height: 70vh;
  flex: 1; /* 这会使内容区域可以伸缩以填满剩余空间 */
  overflow-y: auto; /* 使内容区可滚动 */
  overflow-x: hidden;

  .item {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    margin: 5px;
    background-color: white;

    img {
      width: 90px;
      height: 90px;
    }

    .right {
      width: 228px;
      height: 90px;

      p:first-child {
        line-height: 1.3;
        white-space: normal;
        color: #484848;
        font-size: 13px;
        display: -webkit-box; /* 兼容旧版浏览器 */
        -webkit-line-clamp: 2; /* 显示两行 */
        -webkit-box-orient: vertical; /* 子元素在垂直方向排列 */
        overflow: hidden;
        text-overflow: ellipsis;
      }

      p:last-child {
        margin-top: 33px;
        height: 25px;
        display: flex;
        justify-content: space-between;

        span:first-child {
          font-size: 13px;
          color: #777;
        }

        span:last-child {
          font-size: 14px;
          color: red;
        }
      }
    }
  }

  .total {
    background-color: white;
    font-size: 14px;
    color: #777;
    padding: 8px 16px;
    text-align: right;
  }
}

.money {
  background-color: white;
  margin-top: 5px;

  p {
    width: 351px;
    height: 19px;
    padding: 10px 12px;
    border-bottom: 0.5px solid #f8f8f8;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
  }

  p:last-child {
    span:last-child {
      color: #777;
    }
  }

  .red {
    color: red !important;
  }
}

.pay {
  background-color: white;
  margin-top: 5px;

  p {
    width: 351px;
    height: 19px;
    padding: 10px 12px;
    border-bottom: 0.5px solid #f8f8f8;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
  }

  .mode {
    padding: 10px;
  }
}

.note {
  width: 351px;
  height: 53px;
  padding: 5px 12px;
  background-color: white;
  margin-top: 5px;
  border: none;
  font-size: 14px;
}

.footer {
  width: 100%;
  height: 45px;
  background-color: white;
  position: fixed;
  bottom: 0;
  left: 0;
  font-size: 14px;
  color: #777;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;

  p {
    padding-left: 12px;
  }

  button {
    color: white;
    background: linear-gradient(90deg, #f9211c, #ff6335);
    border: none;
    width: 121px;
    height: 100%;
  }
}

.van-popup {
  .title {
    font-size: 15px;
    color: #303133;
    width: 345px;
    height: 20px;
    margin: 10px auto;
    text-align: center;
    margin-bottom: 20px;
  }

  .button {
    position: absolute;
    bottom: 15px;
    left: 33px;
    width: 308px;
    height: 34px;
    color: #888;
    border: 0.5px solid #e3e3e3;
    border-radius: 5px;
    background-color: white;
    font-size: 13px;
  }
}
</style>
